<template>
  <view class="num-wrapper">
    <view class="sub" @click="decrement">-</view>
    <!--<view class="num">{{ item.quantity }}</view>-->
    <input class="num" v-model="item.quantity" @blur="changeQuantity" @change="changeQuantity" />
    <view class="add" @click="increment">+</view>
  </view>
</template>

<script>
// import Cart from '../../../api/cart'
// const cartModel = new Cart()

export default {
  props: {
    item: {
      type: Object,
      default() {
        return { quantity: 1 }
      }
    }
  },
  watch: {
    // item: {
    //   handler(v) {
    //     console.log('1', v)
    //   },
    //   deep: true
    // }
  },
  computed: {
    step() {
      let n = 1
      // if (this.item.selected_sku_text) {
      //   const item = JSON.parse(this.item.selected_sku_text)
      //   if (item.length > 0) {
      //     let step = item[item.length - 1]
      //     if (step.indexOf('-') > 0) {
      //       step = step.split('-')
      //       const a = +step[0].trim()
      //       const b = +step[1].trim()
      //       n = b - a + 1
      //       // console.log(a, b, n)
      //     }
      //   }
      // }
      return n
    }
  },
  methods: {
    decrement() {
      // if (this.item.quantity > 1) {
      //   this.item.quantity--
      //   this.item.selected = true
      //   cartModel.decrement({ ...this.item }).then(() => {})
      // }
      if (this.item.quantity - this.step > 0) {
        // this.item.quantity = +this.item.quantity - this.step
        // this.item.selected = true
        // cartModel.decrement({ ...this.item }).then(() => {})
        this.$emit('subQuantity', this.item)
      }
    },
    increment() {
      let stock = +this.item.product.stock
      if (this.item.sku) {
        stock = +this.item.sku.stock
      }
      if (this.item.quantity + this.step <= stock) {
        // this.item.quantity++
        // this.item.selected = true
        // cartModel.increment({ ...this.item }).then(() => {})
        // this.item.quantity = +this.item.quantity + this.step
        // this.item.selected = true
        // console.log(this.item.quantity)
        // cartModel.increment({ ...this.item }).then(() => {})
        this.$emit('addQuantity', this.item)
      } else {
        uni.showToast({
          icon: 'none',
          title: '库存不足,请多可以选择数量为:' + stock
        })
      }
    },
    changeQuantity() {
      // this.item.selected = true
      // console.log(this.item.quantity)
      let stock = +this.item.product.stock
      if (this.item.sku) {
        stock = +this.item.sku.stock
      }
      if (isNaN(this.item.quantity) || this.item.quantity < 1) {
        return uni.showToast({
          icon: 'none',
          title: '数量错误'
        })
      }
      if (this.item.quantity > stock) {
        uni.showToast({
          icon: 'none',
          title: '库存不足,请多可以选择数量为:' + stock
        })
      }
      // if (this.item.quantity % this.step !== 0) {
      //   uni.showToast({
      //     icon: 'none',
      //     title: '数量必须是:' + this.step + '的倍数'
      //   })
      // }
      // cartModel.changeNum({ ...this.item }).then(() => {})
      this.$emit('changeQuantity', this.item)
    }
  }
}
</script>

<style scoped lang="scss">
$size: 26px;
$button: $size + 5px;
.num-wrapper {
  display: flex;
  padding-right: 20rpx;
  text-align: center;
  float: right;
  .sub, .num, .add {
    border: 1px solid #dcdcdc;
    min-width: $size;
    height: $size;
    line-height: $size;
    font-size: 36rpx;
  }
  .sub, .add {
    min-width: $button;
    font-weight: 700;
  }
  .num {
    width: 40px;
    font-size: 30rpx;
  }
  .sub {
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .add {
    border-left: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
}
</style>
